<template>
  <div class="context-menu" @contextmenu.stop.prevent="open"></div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { UContextMenu } from '~/components'
function open(e: MouseEvent) {
  UContextMenu(e, {
    data: [
      {
        label: `按钮1`,
        svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="icon"><path d="M741.289 921.352h-488.52c-31.807 0-57.672-25.864-57.672-57.671V478.154a45.759 45.759 0 0 1-27.088 8.797c-12.35 0-23.943-4.835-32.68-13.515l-113.48-113.48c-18-18-18-47.36 0-65.36l187.287-187.172c5.127-5.01 12.758-9.204 19.515-10.718 15.787-3.496 27.38-3.088 36.7-2.738 2.273.058 4.486.174 6.642.174h45.38a23.269 23.269 0 0 1 17.942 8.447 209.599 209.599 0 0 0 161.772 76.08c62.74 0 121.693-27.729 161.772-76.08a23.269 23.269 0 0 1 17.942-8.447h50.681c2.214 0 4.37-.116 6.641-.174 9.263-.35 20.855-.758 36.7 2.738 6.758 1.514 14.39 5.709 19.516 10.718l8.155 8.04 179.074 179.073c18 18 18 47.36 0 65.361L864.147 473.32c-17.943 17.942-47.07 18-65.128.233v390.012c0 31.924-25.924 57.788-57.73 57.788zm-522.89-521.9c3.029 0 6.058.583 8.913 1.748 8.738 3.612 14.388 12.117 14.388 21.555V863.68a11.063 11.063 0 0 0 11.069 11.068h488.578a11.068 11.068 0 0 0 11.068-11.068V417.395c0-9.437 5.65-17.942 14.389-21.554a23.243 23.243 0 0 1 25.399 5.068l39.554 39.555 112.606-113.188-185.54-185.423c-8.971-1.748-15.437-1.515-22.894-1.224-2.854.117-5.65.233-8.388.233h-40.08a256.016 256.016 0 0 1-190.374 84.469c-72.876 0-141.674-30.642-190.375-84.469h-34.72c-2.737 0-5.534-.116-8.388-.233-7.457-.29-13.981-.524-22.894 1.224l-6.99 6.874L54.88 327.509 168.3 440.406l33.671-34.196c4.37-4.427 10.311-6.757 16.428-6.757zm726.197-72.41 16.486 16.487-16.486-16.486zM757.6 140.689s0 .058 0 0z"/><path d="M461.202 829.252H332.227a34.836 34.836 0 0 1-34.777-34.777V554.35c0-12.874 10.427-23.302 23.301-23.302s23.302 10.428 23.302 23.302v228.298h117.15c12.874 0 23.301 10.428 23.301 23.302s-10.427 23.301-23.302 23.301z"/></svg>',
        callback(done) {
          console.log('按钮1')
          done()
        }
      },
      {
        label: '按钮2',
        svg: '<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M505.359 880.866c-203.54 0-369.099-165.559-369.099-369.099s165.56-369.099 369.1-369.099 369.099 165.559 369.099 369.099S708.9 880.866 505.36 880.866zm0-691.594c-177.85 0-322.495 144.645-322.495 322.495s144.645 322.495 322.495 322.495 322.495-144.645 322.495-322.495S683.21 189.272 505.36 189.272z"/><path d="M183.62 730.337c-91.924 0-145.169-21.03-158.45-62.682-14.506-45.38 23.942-98.45 114.236-157.636a23.354 23.354 0 0 1 32.273 6.7c7.049 10.777 4.02 25.224-6.7 32.272-84.06 55.109-99.498 91.576-95.42 104.45 4.253 13.224 39.147 34.312 143.364 29.593 94.605-4.31 214.958-28.544 338.806-68.099 123.907-39.554 235.93-89.653 315.564-140.975 87.672-56.507 103.867-94.022 99.672-107.246-6.116-19.107-60.41-36.06-165.092-28.253a23.342 23.342 0 0 1-24.991-21.496 23.372 23.372 0 0 1 21.496-24.991c86.274-6.408 193.229-1.165 212.977 60.526 31.283 97.984-200.394 228.531-445.412 306.825-127.693 40.778-252.299 65.769-350.865 70.255a657.608 657.608 0 0 1-31.457.757z"/></svg>',
        callback(done) {
          console.log('按钮2')
          done()
        }
      }
    ]
  })
}

</script>

<style lang="scss">
.context-menu {
  height: 200px;
  border: 1px #d1bdbd solid;
}
.icon {
  display: inline-flex;
  vertical-align: -0.15em;
  font-size: 16px;
  color: inherit;
  :deep(svg) {
    fill: currentColor;
    width: 1em;
    height: 1em;
  }
}
</style>
